<template>
  <div class="i-box" hint="bmi标准列表页面">
    <div class="i-table">
      <div :style="{backgroundColor:item.color}" class="i-item" v-for="(item,index) in items">
        <div><span v-show="index===showIndex">→</span>{{item.name}}</div>
        <div>{{item.range}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "BmiList",
    data() {
      return {
        test: 0,
        showIndex:1,
        items: [
          {
            name: '体型',
            color: '#8DD8F8',
            min: 0,
            max: 0,
            range: 'BMI',
            tip: '',
          },
          {
            name: '偏瘦',
            color: '#FFFF00',
            min: 0,
            max: 18.5,
            range: '<18.5',
            tip: '太瘦了，尽快增加一点体重吧！',
          },
          {
            name: '正常',
            color: '#66CC00',
            min: 18.5,
            max: 24,
            range: '18.5~24',
            tip: '正常范围内,注意保持哦~',
          },
          {
            name: '超重',
            color: '#FF9900',
            min: 24,
            max: 27.9,
            range: '24~27.9',
            tip: '小心喔！稍胖，要多多运动啊！:)',
          },
          {
            name: '肥胖',
            color: '#EE0000',
            min: 27.9,
            max: 1000,
            range: '>27.9',
            tip: '哎呀！比较胖啊，赶快开始减肥计划！',
          },
        ]
      }
    },
    methods: {
      back() {

      },
      getTip(index) {
        for (let i=1;i<this.items.length;i++) {
          let item = this.items[i]
          if (index >= item.min && index <= item.max) {
            this.showIndex = i
            return item.tip
          }
        }
      }
    },
    components: {},
    created() {

    },
  }
</script>

<style scoped>
  .i-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .i-table{
    width: 26rem;
  }
  .i-item{
    font-size: 1.6rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.6rem 0rem;
  }
  .i-item >div{
    flex: 1;
  }
</style>
